<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $fn } = props.ujt;
// Vue组件
const pool = new $fn.AsaiWorker(new URL('./worker.js', import.meta.url));
const results = reactive([]);
const inputData = ref('');

async function handleSubmit() {
    try {
        const result = await pool.execute(inputData.value);
        results.push(result);
    } catch (e) {
        console.error('Task failed:', e);
    }
}

function handleSubmit1() {
    try {
        pool.execute(inputData.value).then((result) => {
            results.push(result);
        });
    } catch (e) {
        console.error('Task failed:', e);
    }
}

onBeforeUnmount(() => {
    pool.terminateAll();
});
</script>

<template>
    <div>
        <input v-model="inputData" placeholder="输入计算数据" />
        <button @pointerdown="handleSubmit">提交任务</button>
        <button @pointerdown="handleSubmit1">提交任务1</button>
        <div>
            <h3>计算结果：</h3>
            <ul>
                <li v-for="(result, index) in results" :key="index">
                    {{ result }}
                </li>
            </ul>
        </div>
    </div>
</template>
